<!DOCTYPE html>
<html>
<head>
	<title>Area Management</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Area Management">
	<meta name="author" content="xufei">

	<link href="http://libs.baidu.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/tree.css" rel="stylesheet"/>
	<script type="text/javascript" src="../libs/lodash/lodash.min.js"></script>
	<script type="text/javascript" src="../js/thin.js"></script>
</head>
<body>
<div class="span12">
	<div class="header">
		<h3>Area Management</h3>
	</div>
	<div>
		<div id="tree1" class="span12"></div>

		<div class="row">
			<div class="header">
				<h4>Detail</h4>
			</div>
			<hr/>
			<form class="form-horizontal span6">
				<div class="control-group">
					<label class="control-label" for="inputName">Name</label>

					<div class="controls">
						<input type="text" id="inputName" placeholder="Name">
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="inputCode">Code</label>

					<div class="controls">
						<input type="text" id="inputCode" placeholder="Code">
					</div>
				</div>
			</form>
		</div>

		<div class="modal-footer">
			<div id="operateBtns">
				<button id="newBtn" class="btn btn-primary">New</button>
				<button id="modifyBtn" class="btn btn-primary"><i class="icon-edit icon-white"></i>Modify</button>
				<button id="deleteBtn" class="btn btn-primary"><i class="icon-remove icon-white"></i>Delete</button>
			</div>
			<div id="confirmBtns">
				<button id="okBtn" class="btn btn-primary"><i class="icon-ok icon-white"></i>OK</button>
				<button id="cancelBtn" class="btn btn-primary">Cancel</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	thin.require(["controls/tree", "role/vm/areaViewModel"], function () {
		var areaManage = thin.use("AreaManage");
		areaManage.init();
		thin.fire({type: "ready"});
	});
</script>
</body>
</html>